<template>
    <Modal v-model:visible="isShowModal" :title="`${editId ? '编辑' : '添加'}标签`" @ok="handleOk" @cancel="handleCancel"
        ok-text="提交" cancel-text="取消" :loading="loading">
        <Form :model="formState" name="basic" ref="formRef" :label-col="{ span: 4 }" :wrapper-col="{ span: 18 }"
            autocomplete="off">
            <FormItem label="标签名称">
                <Input v-model:value="formState.name" placeholder="请输入标签名称" allowClear></Input>
            </FormItem>
            <FormItem label="所属分类">
                <Select v-model:value="formState.type" style="width: 100%" placeholder="请选择所属分类" allowClear>
                    <SelectOption :value="item.value" :label="item.label" :key="item.value"
                        v-for="item in TagsTypeOption">
                        <span>{{ item.label }}</span>
                    </SelectOption>
                </Select>
            </FormItem>
            <FormItem label="关联词汇">
                <Select v-model:value="formState.relationWords" placeholder="请输入关联词汇" allowClear mode="tags"
                    :options="relationOptions"></Select>
            </FormItem>
            <FormItem label="标签等级">
                <Select v-model:value="formState.level" style="width: 100%" placeholder="请选择标签等级" allowClear>
                    <SelectOption :value="item.value" :label="item.label" :key="item.value"
                        v-for="item in TagsLevelOptions">
                        <span>{{ item.label }}</span>
                    </SelectOption>
                </Select>
            </FormItem>
            <FormItem label="标签显示">
                <RadioGroup v-model:value="formState.isShow" :options="EnumIsShow" />
            </FormItem>
            <FormItem label="标签分值">
                <InputNumber v-model:value="formState.value" placeholder="请输入标签分值" allowClear style="width: 100%"
                    :min="0"></InputNumber>
            </FormItem>
            <FormItem label="标签状态">
                <RadioGroup v-model:value="formState.state" :options="TagsStateOptions" />
            </FormItem>
        </Form>
    </Modal>
</template>

<script lang="ts" setup>
import { Modal, Form, Input, InputNumber, message, Select, SelectProps, RadioGroup } from 'ant-design-vue'
import { EnumIsShow, TagsTypeOption,TagsLevelOptions,TagsStateOptions } from './index'
import { TagEditRequest, TagApi, TagResult } from '@/api';

const FormItem = Form.Item;
const SelectOption = Select.Option;

const emit = defineEmits(['ok']);

const relationOptions = ref<SelectProps['options']>([]);
const isShowModal = ref(false)
const loading = ref(false)
const editId = ref<string>();
const formState = ref<TagEditRequest>({
    name: '',
    value: 0,
})
const formRef = ref()
const handleOpen = (data: TagResult) => {
    if (data) {
        editId.value = data.id!.toString();
        formState.value = {
            name: data.name,
            isShow: data.isShow,
            level: data.level,
            relationWords: data.relationWords,
            value: data.value || 0,
            state: data.state,
            type: data.type,
        }
    } else {
        handleEmpty();
    }
    isShowModal.value = true;
}

const handleOk = async () => {
    loading.value = true;

    try {
        if (editId.value) {
            let params = {
                id: editId.value,
                ...formState.value
            }
            await TagApi.tagTagedit(editId.value, params)
            message.success('修改成功')
        } else {
            await TagApi.tagTagadd(formState.value)
            message.success('添加成功')
        }

        emit('ok')
        handleClose();
    } catch (error) {
        console.log(error);
    } finally {
        loading.value = true;
    }
}

const handleEmpty = () => {
    editId.value = undefined;
    formState.value = {
        value: 0
    };
}

function handleClose(){
    isShowModal.value = false;
}

function handleCancel(){
    handleEmpty();
    handleClose();
}

defineExpose({ handleOpen })
</script>